<template>
  <div class="password-container">
    <!-- 顶部装饰 -->
    <div class="pink-header">
      <div class="header-blob"></div>
      <h2 class="page-title">修改密码</h2>
    </div>

    <!-- 密码修改表单 -->
    <van-form @submit="onSubmit" class="pink-form">
      <van-field 
        label="用户编号" 
        v-model="userForm.id" 
        readonly
        label-class="pink-label"
        left-icon="idcard"
      />
      
      <van-field 
        label="用户名" 
        v-model="userForm.name" 
        type="text" 
        readonly
        label-class="pink-label"
        left-icon="user-o"
      />
      
      <van-field 
        label="原密码" 
        v-model="userForm.password" 
        type="password" 
        placeholder="请输入原密码"
        :rules="[{ pattern:regNamePwd, required: true, message: '3-12位字母数字组合' }]"
        label-class="pink-label"
        left-icon="lock"
      />
      
      <van-field 
        label="新密码" 
        v-model="userForm.password2" 
        type="password" 
        placeholder="请输入新密码"
        :rules="[{ pattern:regNamePwd, required: true, message: '3-12位字母数字组合' }]"
        label-class="pink-label"
        left-icon="lock"
      />
      
      <van-field 
        label="确认密码" 
        v-model="userForm.password22" 
        type="password" 
        placeholder="请再次输入新密码"
        :rules="[{ validator: validatePassword, message: '两次密码不一致' }]"
        label-class="pink-label"
        left-icon="lock"
      />
      
      <div class="submit-btn">
        <van-button 
          round 
          block 
          type="primary" 
          native-type="submit"
          color="linear-gradient(to right, #ff8a98, #ff6b8b)"
        >
          确认修改
        </van-button>
      </div>
    </van-form>

    <!-- 底部装饰 -->
    <div class="pink-footer"></div>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { updatePwdAPI } from "@/api/user.js";
import { getUserLocal } from "@/utils/auth.js";

export default {
  data() {
    return {
      userForm: {
        id: null,
        name: "",
        password: "",
        password2: "",
        password22: ""
      },
      regNamePwd: /^[a-z0-9]{3,12}$/i,
    };
  },

  mounted() {
    let user = getUserLocal();
    this.userForm.id = user.id;
    this.userForm.name = user.name;
  },

  methods: {
    validatePassword(val) {
      return val === this.userForm.password2;
    },

    onSubmit() {
      if (this.userForm.password2 !== this.userForm.password22) {
        showToast({
          message: "两次密码输入不一致",
          className: 'pink-toast-error'
        });
        return;
      }

      let user = { ...this.userForm };
      delete user.password22;

      updatePwdAPI(user).then(() => {
        showToast({
          message: "密码修改成功",
          className: 'pink-toast'
        });
        this.$router.push({ name: "user" });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.password-container {
  min-height: 100vh;
  background-color: #fff5f7;
  position: relative;
  padding-bottom: 50px;
}

.pink-header {
  height: 180px;
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  .header-blob {
    position: absolute;
    width: 250px;
    height: 250px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    right: -50px;
    top: -50px;
  }
  
  .page-title {
    color: white;
    font-size: 22px;
    margin-top: 20px;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
}

.pink-form {
  margin: -50px 20px 0;
  padding: 25px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(255, 107, 139, 0.1);
  position: relative;
  z-index: 2;
}

:deep(.pink-label) {
  color: #ff6b8b !important;
  font-weight: 500;
}

:deep(.van-field__control) {
  color: #666;
}

.submit-btn {
  margin: 30px 0;
}

.pink-footer {
  height: 30px;
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

// 自定义粉色主题的toast
:deep(.pink-toast) {
  background: linear-gradient(to right, #ff8a98, #ff6b8b);
  color: white;
  border-radius: 20px;
}

:deep(.pink-toast-error) {
  background: #ff4757;
  color: white;
  border-radius: 20px;
}
</style>